<template>
  <div style="width: 90%;margin: 0px auto;background-color: white;height: 100%;border: 1px solid red;padding: 30px">
    <el-input style="width: 200px" v-model="search"/>
    <el-button style="margin-left: 5px" @click="searchClick">搜索</el-button>
    <el-select style="margin-left: 20px" v-model="avite" @change="aviteChange">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-popconfirm
        title="确定删除吗？"
        @confirm="deleteBatch"
    >
      <template #reference>
        <el-button type="text">批量删除</el-button>
      </template>
    </el-popconfirm>
    <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="user_nickname" label="发送者"  width="180"/>
      <el-table-column prop="barrage_video_time" label="播放时间" sortable width="180"/>
      <el-table-column prop="barrage_content" label="弹幕内容"  width="180"/>
      <el-table-column label="操作"  width="180">
        <template #default="scope">
          <el-popconfirm title="确认删除吗？"
                         @confirm="deletes(scope.row.barrage_id)">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 80px;">
      <el-pagination
          style="margin: 30px 0px"
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="obj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="obj.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "BulletAdmin",
  data() {
    return {
      tableData: [],
      options: [],
      value: '',
      currentPage: 1,
      obj: {},
      size: 5,
      search: '',
      avite: 0,
      ids:[]
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      let user = sessionStorage.getItem("user")
      var users = JSON.parse(user)
      this.$http.get("hemo/system/barrage/queryByUserId?userId="+users.userId+"&videoId="+this.avite+"&search="+this.search+"&currentPage="+this.currentPage
      +"&pageSize="+this.size).then(r=>{
        this.obj=r.data
        this.tableData=r.data.list
      })

      this.$http.get("hemo/system/video/byUserId?userId="+users.userId).then(r=>{
        this.options=[]
        this.options.push( {
          value: 0,
          label: '全部视频'
        })
        for (let i = 0; i < r.data.length; i++) {
          this.options.push({
            value: r.data[i].videoId,
            label: r.data[i].videoTitle
          })
        }
      })
    },
    formatter(row, column) {
      return row.address;
    },
    handleSelectionChange(val) {
      this.ids = val;
      console.log(val)
    },
    handleSizeChange(pageSize) {
      this.size = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    searchClick() {
      this.load()
    },
    aviteChange(){
     this.load()
    },
    deletes(id){
      this.$http.get("hemo/system/barrage/del?id="+id).then(r=>{
        this.$message.success('删除成功');
        this.load();
      })
    },
    deleteBatch(){
      if (this.ids.length>0){
        var a=[]
        for (let i = 0; i < this.ids.length; i++) {
          a.push(this.ids[i].barrage_id)
        }
        this.$http.get("hemo/system/barrage/dels?ids="+a).then(r=>{
          this.$message.success('删除成功');
            this.load();
        })
      }else{
        this.$message.success('请选中至少一条');
      }
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
